<template>
  <div class="equipment">
    <div class="ui_left_mask" :class="hiddenUI ? 'hiddenLeft' : ''">
      <div class="ui_left">
        <div class="nape_content" style="margin-top: 0;">
          <div class="content_title">
            <span>设备总览</span>
          </div>
          <div class="center_content">
            <charts-chen container="leftTopChart" width="100%" height="100%" :options="leftTopChart" />
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>喷花车间</span>
          </div>
          <div class="center_content">
            <div class="invest_box">
              <div class="invest_list_con" v-for="(item, index) in leftTwoDataList" :key="index">
                <div class="name">{{ item.name }}</div>
                <div class="progress">
                  <div :style="{ width: (item.value / item.maxValue) * 100 + '%', background: item.color }"></div>
                </div>
                <div class="value">
                  <span :style="'color:' + item.color">{{ item.value }}</span>台
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>火箭车间</span>
          </div>
          <div class="center_content">
            <charts-chen container="leftThreeChart" width="100%" height="100%" :options="leftThreeChart" />
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>礼花车间</span>
          </div>
          <div class="center_content">
            <charts-chen container="leftFourChart" width="100%" height="100%" :options="leftFourChart" />
          </div>
        </div>
      </div>
    </div>
    <div class="ui_right_mask" :class="hiddenUI ? 'hiddenRight' : ''">
      <div class="ui_right">
        <div class="nape_content" style="margin-top: 0;">
          <div class="content_title">
            <span>生产车间管理</span>
          </div>
          <div class="center_content">
            <div class="flex_details_box">
              <div class="item_details">
                <p>正在运行</p>
                <count-to :start-val="0" :end-val="40" :duration="3000" :decimals="0" />
                <b>台</b>
              </div>
              <div class="item_details">
                <p>停止运行</p>
                <count-to :start-val="0" :end-val="8" :duration="3000" :decimals="0" />
                <b>台</b>
              </div>
              <div class="item_details">
                <p>故障设备</p>
                <count-to :start-val="0" :end-val="4" :duration="3000" :decimals="0" />
                <b>台</b>
              </div>
            </div>
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>运输设备管理</span>
          </div>
          <div class="center_content">
            <div class="charts_box pseudoClass"
              :style="`--title:'${rightTwoPieChartValue.title}';--value:'${rightTwoPieChartValue.value}'`">
              <charts-chen container="rightTwoPieChart" width="100%" height="100%" :options="rightTwoPieChart"
                :isClick="true"></charts-chen>
            </div>
            <div class="list_box">
              <div class="listTotle">
                <span>设备总数 91</span>
              </div>
              <div class="pie_list" v-for="(item, index) in rightTwoPieChart.dataset.source" :key="index"
                @mouseover="pieChartMouseover($event, '运输设备管理')" :class="index !== 0 || 'active'">
                <div class="name">
                  <div class="circle" :style="'background:' + item[3]"></div>
                  <span>{{ item[0] }}</span>
                </div>
                <div class="rate" :style="'color:' + item[3]">
                  <count-to :start-val="0" :end-val="Number(item[1] || 0)" :duration="3000" :decimals="0" />
                  %
                </div>
                <div class="num">
                  <count-to :start-val="0" :end-val="Number(item[2] || 0)" :duration="3000" :decimals="0" />
                  家
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>设备故障统计</span>
          </div>
          <div class="center_content">
            <div class="table_box">
              <div class="tableHead">
                <span style="width: 12%">序号</span>
                <span>设备名称</span>
                <span>停机次数</span>
                <span>停机时长</span>
              </div>
              <div class="tableContent" v-if="rightBottomTable.list.length != 0">
                <div class="tableItem" v-for="(item, index) in rightBottomTable.list"
                  :style="{ animationDelay: index * 0.05 + 's' }" :key="index"
                  @click="webToUeMessige('设备故障统计', item.name)">
                  <div class="textContent" style="width: 12%">
                    <span>{{ index + 1 }}</span>
                  </div>
                  <div class="textContent">
                    <span class="scrollText">{{ item.name }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.num }}</span>
                  </div>
                  <div class="textContent">
                    <span> {{ item.time }} </span>
                  </div>
                </div>
              </div>
              <div class="tableContent" v-else-if="!rightBottomTable.loading">
                <div class="noData"></div>
              </div>
              <div class="tableContent" v-if="rightBottomTable.loading">
                <a-spin />
              </div>
            </div>
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>设备可用度排行</span>
          </div>
          <div class="center_content">
            <div class="table_box">
              <div class="tableHead">
                <span style="width: 12%">序号</span>
                <span>设备名称</span>
                <span>停机次数</span>
                <span>停机时长</span>
              </div>
              <div class="tableContent" v-if="rightBottomTable.list.length != 0">
                <div class="tableItem" v-for="(item, index) in rightBottomTable.list"
                  :style="{ animationDelay: index * 0.05 + 's' }" :key="index"
                  @click="webToUeMessige('设备可用度排行', item.name)">
                  <div class="textContent" style="width: 12%">
                    <span>{{ index + 1 }}</span>
                  </div>
                  <div class="textContent">
                    <span class="scrollText">{{ item.name }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.num }}</span>
                  </div>
                  <div class="textContent">
                    <span> {{ item.time }} </span>
                  </div>
                </div>
              </div>
              <div class="tableContent" v-else-if="!rightBottomTable.loading">
                <div class="noData"></div>
              </div>
              <div class="tableContent" v-if="rightBottomTable.loading">
                <a-spin />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, onUnmounted, nextTick, watch } from 'vue';
import { randomColor, delay, webToUeMessige } from '../../utils';

export default defineComponent({
  props: {
    showUI: {
      type: Boolean
    }
  },
  components: {},
  setup (props) {
    const data = reactive({
      hiddenUI: false,
      leftTopChart: {
        tooltip: {
          trigger: 'item'
        },
        series: [{
          type: 'graph',
          layout: 'force',
          force: {
            repulsion: 60,
            edgeLength: 0
          },
          roam: 'scale',
          label: {
            show: true,
          },
          data: [] as any[]
        }]
      },
      leftTwoDataList: [
        {
          name: '正在运行',
          value: 68,
          color: 'rgb(4, 210, 169)',
          maxValue: 80
        },
        {
          name: '停止运行',
          value: 20,
          color: 'rgb(254, 184, 52)',
          maxValue: 80
        },
        {
          name: '故障设备',
          value: 12,
          color: 'rgb(255, 112, 123)',
          maxValue: 80
        },
      ],
      leftThreeChart: {
        tooltip: {
          show: true,
          backgroundColor: "rgba(24, 157, 247, 0.6)",
          textStyle: {
            color: "white",
          },
        },
        grid: {
          top: "0%",
          left: "0%",
          right: "0%",
          bottom: "0%",
        },
        legend: {
          show: true,
          bottom: 0,
          right: 0,
          itemGap: 18,
          itemWidth: 9,
          itemHeight: 9,
          orient: "vertical",
          icon: "circle",
          selectedMode: true,
          textStyle: {
            color: "#ffffff",
            fontSize: 12,
          }
        },
        toolbox: {
          show: false,
        },
        series: [
          {
            type: "pie",
            clockWise: false,
            radius: ["60%", "75%"],
            center: ["45%", "50%"],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "outside",
                  color: "#ddd",
                  formatter: (item: any) => {
                    return `${item.name} ${item.value}台`;
                  }
                },
                labelLine: {
                  show: true,
                  color: "#00ffff",
                },
              },
            },
            data: (() => {
              const list = [] as any;
              const scaleData = [
                { name: "正在运行", value: 60, color: "#00cfff" },
                { name: "停止运行", value: 20, color: "#00ffff" },
                { name: "故障设备", value: 10, color: "#ffe000" }
              ];
              scaleData.forEach((item: any) => {
                list.push({
                  name: item.name,
                  value: item.value,
                  itemStyle: {
                    normal: {
                      borderWidth: 5,
                      shadowBlur: 20,
                      borderColor: item.color,
                      shadowColor: item.color,
                    },
                  },
                });
              });
              return list;
            })(),
          },
        ]
      },
      leftFourChart: {
        textStyle: {
          color: '#fff'
        },
        grid: {
          left: '20%',
          top: '15%',
          bottom: '10%',
          right: '10%',
        },
        yAxis: {
          type: 'category',
          data: ['正在运行', '停止运行', '故障设备']
        },
        xAxis: {
          type: 'value'
        },
        series: [{
          data: [60, 20, 8],
          type: 'bar',
          barWidth: 12,
        }, {
          type: 'lines',
          coordinateSystem: 'cartesian2d',
          data: [
            { coords: [[0, 0], [60 - 5, 0]] },
            { coords: [[0, 1], [20 - 5, 1]] },
            { coords: [[0, 2], [8 - 5, 2]] },
          ],
          effect: {
            show: true,
            period: 3,
            trailLength: .3,
            symbolSize: 24,
            symbol: "pin",
            color: "rgba(255, 255, 255, 0.1)"
          },
          lineStyle: {
            width: 0,
            opacity: 0.5,
            curveness: 0
          },
          z: 99
        }]
      },
      rightTwoPieChart: {
        tooltip: {
          confine: true,
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#55c0ff'
            }
          },
          backgroundColor: 'rgba(24, 157, 247, 0.6)',
          textStyle: {
            color: 'white'
          }
        },
        legend: {
          show: false
        },
        color: ['#00e5a8', '#b6f971', '#8a65e0'],
        grid: {
          left: 10,
          bottom: 10,
          top: 10,
          right: 10
        },
        title: {
          show: false
        },
        dataset: {
          source: [
            ['正在运行', 75, 68, '#00e5a8'],
            ['停止运行', 16, 15, '#b6f971'],
            ['故障设备', 9, 8, '#8a65e0'],
          ]
        },
        series: [
          {
            type: 'pie',
            radius: ['70%', '95%'],
            width: '100%',
            height: '100%',
            label: {
              show: false
            },
            labelLine: {
              length: 0
            }
          }
        ]
      },
      rightTwoPieChartValue: {
        title: '正在运行',
        value: '75%'
      },
      rightBottomTable: {
        list: [
          { name: '设备1', num: 300, time: 9 },
          { name: '设备2', num: 280, time: 8 },
          { name: '设备3', num: 240, time: 6 },
          { name: '设备4', num: 210, time: 5 },
          { name: '设备5', num: 180, time: 3 }
        ],
        loading: true
      }
    });

    onMounted(() => {
      nextTick(() => {
        delay(1000).then(() => {
          const arr = [
            '叉式装卸机', '硅胶挤出机', '高速编织机', '挤出机', '高精度压铸机', '复绕机',
            '小拉机', '中拉机', '半自动切割机', '切割机', '包装机', '出入料运输'
          ];
          const list = [] as any[];
          arr.forEach((item, index) => {
            list.push({
              name: item,
              value: index + 1 * 20,
              draggable: true,
              label: {
                color: randomColor(),
                fontSize: index * 0.5 + 12
              }
            });
          });
          data.leftTopChart.series[0].data = list;
        });
        delay(1200).then(() => {
          data.rightBottomTable.loading = false;
        });
      });
    });

    watch(() => props.showUI, (val) => {
      data.hiddenUI = val;
    });

    onUnmounted(() => {

    });


    const pieChartMouseover = (e: Event, name: string) => {
      const target = e.target as HTMLElement;
      if (target?.classList.contains('pie_list')) {
        const parentNode = target.parentNode;
        const childNodes = parentNode?.childNodes as unknown as HTMLElement[];
        target?.classList.add('active');
        switch (name) {
          case '运输设备管理':
            data.rightTwoPieChartValue.value =
              target.querySelector('.rate span')?.innerHTML + '%' || '';
            data.rightTwoPieChartValue.title =
              target.querySelector('.name span')?.innerHTML || '';
            break;
        }
        childNodes?.forEach((item) => {
          if (item.nodeType === Node.ELEMENT_NODE && item != target) {
            item.classList.remove('active');
          }
        });
      }
    };

    return {
      ...toRefs(data),
      pieChartMouseover,
      webToUeMessige
    };
  },
});
</script>

<style scoped lang="less">
.equipment {
  width: 100%;
  height: 100%;
  user-select: none;

  .ui_left,
  .ui_right {
    pointer-events: auto;
    width: 95%;
    height: calc(100% - 10px);
    padding: 5px 10px;

    .nape_content {
      width: 100%;
      padding-bottom: 15px;

      .content_title {
        width: 100%;
        height: 35px;
        background: url('../../assets/img/contentTitle.png') no-repeat center;
        background-size: 100% 100%;

        span {
          margin-left: 40px;
          color: white;
          font-size: 20px;
          font-weight: bold;
          line-height: 25px;
          background-image: -webkit-linear-gradient(top, rgb(238, 252, 255) 50%, #6ae4ff);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .center_content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: calc(100% - 35px);
        margin-top: 5px;

        .invest_box {
          width: 100%;
          height: 100%;
          color: #dae9ff;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;

          .invest_list_con {
            display: flex;
            align-items: center;
            height: 25%;
            width: 100%;

            .name {
              width: 20%;
              text-align: right;
            }

            .progress {
              height: 8px;
              width: 50%;
              background: rgba(158, 158, 158, 0.1);
              margin: 0 10px;

              div {
                height: 100%;
                border-radius: 2px;
              }
            }

            .value {
              width: 25%;
              text-align: right;
              overflow: hidden;
              white-space: nowrap;
            }
          }
        }

        .flex_details_box {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          margin-top: 18px;

          .item_details {
            width: 25%;
            height: 128px;
            margin: 16px 1%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background: url(../../assets/img/quality_bg.png) no-repeat center;
            background-size: 100% 100%;

            p {
              color: #bee9ff;
              margin-top: -2.25vw;
              margin-bottom: 28px;
              font-size: 16px;
              white-space: nowrap;
            }

            span {
              color: #e6f0ff;
              font-size: 24px;
              line-height: 60px;
              font-weight: 600;
              height: 60px;
            }

            b {
              color: #97bccf;
            }
          }
        }

        .charts_box {
          width: 50%;
          height: 95%;
          margin-top: 10px;
          background: url('../../assets/img/charts_box.png') no-repeat center;
          background-size: 100% 100%;
        }

        .pseudoClass {
          position: relative;

          &::before {
            content: var(--title);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 1px solid #304157;
            box-shadow: 0 0 1px 1px #304157;
            height: 98%;
            aspect-ratio: 1 / 1;
            z-index: 9;
            pointer-events: none;
            color: #bfebfc;
            font-size: 12px;
            line-height: 218px;
            text-align: center;
          }

          &::after {
            content: var(--value);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 1px dashed #455365;
            box-shadow: 0 0 1px 1px #455365;
            height: 64%;
            aspect-ratio: 1 / 1;
            z-index: 9;
            pointer-events: none;
            color: #fff;
            font-size: 24px;
            font-weight: 600;
            text-align: center;
            line-height: 88px;
          }
        }

        .list_box {
          margin-left: 5px;
          width: 50%;
          height: 100%;
          overflow-y: auto;
          overflow-x: hidden;
          display: flex;
          justify-content: space-around;
          align-items: center;
          flex-wrap: wrap;

          .listTotle {
            width: 100%;
            height: 24px;

            span {
              font-size: 18px;
              color: aliceblue;
              font-weight: 600;
              text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.6);
            }
          }

          .pie_list {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #97bccf;

            &>* {
              pointer-events: none;
            }

            .name {
              display: flex;
              align-items: center;
              width: 56%;

              .circle {
                width: 6px;
                height: 6px;
                border-radius: 10px;
                margin: 0 2px;
              }

              span {
                font-size: 15px;
                text-shadow: 0px 0px 1px #7cf6ff;
              }
            }

            .rate {
              width: 27%;
              text-align: center;

              span {
                font-size: 15px;
              }
            }

            .num {
              width: 27%;
              padding-right: 5px;
              text-align: center;
              white-space: nowrap;

              span {
                color: aliceblue;
                font-size: 15px;
              }
            }

            &:hover {
              cursor: pointer;
              background: linear-gradient(to left,
                  rgba(46, 117, 189, 0.8),
                  rgba(45, 130, 214, 0.8));
              border-left: outset 3px rgb(103, 179, 255);
            }
          }

          .active {
            background: linear-gradient(to left,
                rgba(46, 117, 189, 0.8),
                rgba(45, 130, 214, 0.8));
            border-left: outset 3px rgb(103, 179, 255);
          }
        }

        .table_box {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-direction: column;
          font-size: 14px;
          padding: 0 5px;

          .tableHead {
            width: 100%;
            height: 36px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
              width: 25%;
              font-size: 16px;
              text-align: center;
              color: #bde5fe;
            }
          }

          .tableContent {
            width: 100%;
            height: calc(100% - 36px);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            overflow-y: auto;
            overflow-x: hidden;

            .tableItem {
              width: 100%;
              height: 30px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: 3px 0;
              transform-origin: 0 100%;

              .textContent {
                overflow: hidden;
                width: 25%;
                line-height: 30px;
                height: 30px;

                span {
                  text-align: center;
                  display: inline-block;
                  width: 100%;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                  transition: all 3s linear;
                  color: #6ae4ff;
                }
              }

              &:nth-child(odd) {
                background: rgba(255, 255, 255, 0.2);
              }

              &:hover {
                background: rgba(0, 174, 240, 0.6);

                .scrollText {
                  animation: scroll-left 3s linear infinite;
                  overflow: visible;
                }
              }

              @keyframes move_tableItem {
                0% {
                  transform: translateX(260px) skewX(-60deg);
                  opacity: 0;
                }

                100% {
                  transform: translateX(0px) skewX(0deg);
                  opacity: 1;
                }
              }

              @keyframes scroll-left {
                from {
                  transform: translateX(0);
                }

                to {
                  transform: translateX(-150%);
                }
              }
            }

            .active {
              background: rgba(0, 174, 240, 0.6);
            }
          }
        }
      }
    }
  }
  .ui_left,.ui_right{
    .nape_content {
      height: 25%;
    }
  }
}
</style>
